<template>
  <div>
    <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
    <div class="panel-container">
      <van-row type="flex" align="center" justify="space-between" @click="handleClick">
        <van-col><b class="L-text L-bold-text">{{currentCondition}}{{itemdata.stitle}}</b></van-col>
        <van-col style="text-align:right">
          <!-- {{showtitle}} -->
          <van-icon name="arrow" />
        </van-col>
      </van-row>
      <van-row type="flex" align="center">
        <van-col span="24">
          <div class="echart-box L-margin-top-20" ref="chart"></div>
        </van-col>
        
      </van-row>
    </div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { apiConfigurable } from "@/request/api/api";

const router = useRouter();
const route = useRoute();

const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

const chart = ref(null);

onMounted(() => {
  initChart();
  currentCondition.value = props.itemdata.condition;
  completedata.value = props.itemdata.completedata;
});
const showtitle = ref("");
const show = ref(false);
const tempindex = ref(0);
const itemid = ref("");
const itemname = ref("");
const actions = [
  { name: "本年", value: "myyear" },
  { name: "上年", value: "mypreyear" },
  { name: "本季度", value: "myquarter" },
  { name: "上季度", value: "myprequarter" },
  { name: "本月", value: "mymonth" },
  { name: "上月", value: "mypremonth" },
  { name: "本周", value: "myweek" },
  { name: "上周", value: "mypreweek" },
  { name: "本日", value: "myday" },
  { name: "上日", value: "mypreday" },
];
const currentCondition = ref("");
const completedata = ref([]);

function initChart() {
  const { itemdata } = props;

  let chartDom = chart.value;

  let myChart = echarts.init(chartDom);

  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "20%",
    },
    legend: {
      data: [itemdata.snamearr[1]],
    },
    xAxis: {
      type: "value",
      name: itemdata.snamearr[1] + "(" + itemdata.measurearr[0] + ")",
      nameLocation: "middle",
      nameTextStyle: {
        padding: [13, 13, 13, 13],
      },
      boundaryGap: [0, 0.01],
      minInterval: 1,
    },
    yAxis: {
      type: "category",
      name: itemdata.snamearr[0] + "(公司排名)",
      data: itemdata.valuearr,
    },
    series: [
      {
        name: itemdata.snamearr[1],
        type: "bar",
        data: itemdata.value0arr,
      },
    ],
  };

  myChart.setOption(options);
}

function onSelect(item) {
  show.value = false;



}


function handleClick() {
  show.value = true;
}


</script>
<style  scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  /* background: #000; */
}

.echart-box {
  width: 100vw;
  height: 250px;
  /* border: 3px solid pink; */
  /* margin: 20px auto; */
}
</style>
